<template>
   <ul>
    <li v-for="item in pageData" :key="item.id">
        {{ item.id }} ----- {{ item.name }} ----- {{ item.price }}
    </li>
   </ul>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    props: {
        data: {
            type: Array,
            required: true
        },
        page:{
            type: Number,
            default: 1
        },
        pageSize:{
            type: Number,
            default: 2,
        },
    },
    computed:{
        pageData(){
            const start = (this.page - 1) * this.pageSize;
            const end = start + this.pageSize;
            return this.data.slice(start, end);
        }
    },
}
</script>

<style>

</style>